<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        width: 900px;
        height: 300px;
        background-color: rgb(155, 126, 126);
        overflow: hidden;
        margin: 100px auto;
      }

      #box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: orange;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="box" onmouseover="text()"></div>
    </div>
  </body>
  <script type="text/javascript">
    var x = 0
    var oBox = document.getElementById('box')
    const id = setInterval(function () {
      x++
      oBox.style.left = x + 'px'
      if (x === 900) x = 0
    }, 20)
    function text(params) {
      alert(1)
      
      clearInterval(id)
    }
  </script>
</html>
